<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>作者个人站点：http://112.74.179.151/</title>

</head>
<body>

<canvas id="canvas" width="800px" height="600px" style="background: #ddeeff"></canvas>

</body>
<script>
    let canvas=document.getElementById('canvas');
    c=canvas.getContext('2d');
//    把坐标原点平移到canvas画布的中心点
    c.translate(400,300);
//    设置边线颜色
    c.strokeStyle = "#158539";

//    求解正六边形6个点的纵横坐标
    let x = [];//横坐标数组
    let y = [];//纵坐标数组
//    循环计算六个点的坐标
    for( let i=0;i<6;i++){
        let r = 200;//正六边形外接圆半径
        x[i]=r*Math.cos(2*Math.PI/6*i);//计算横坐标，并存入x数组[]
        y[i]=r*Math.sin(2*Math.PI/6*i);//计算纵坐标，并存入y数组[]
    }

//    调用数组里的数据定义点的位置
    c.moveTo(x[0],y[0]);//定义初始点
//    利用for循环定义第2~6个点
    for(let i = 1;i<6;i++){
        c.lineTo(x[i],y[i]);
    }
    c.closePath();//设置轮廓闭合，最后一个点与第一个点连线
    c.stroke();//开始绘制线条轮廓
</script>
<div class="" style="margin-top:100px;">
    <a style="text-decoration: none;color: rgb(0, 140, 255);" href="http://www.yanhuangxueyuan.com/WebGL/" target="_blank">源码对应电子书地址</a>
    </div>
    </html>
